<template>
    <div style="padding: 20px">
        <el-form ref="ruleForm" :model="form" :rules="rules" >
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>订单信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="订单编号:" prop="orderCode" >
                                <el-input maxlength="50" readonly  v-model="form.orderCode" @click.native="selectOrder"  placeholder="请选取订单编号">
                            </el-input>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户名称:" prop="customName">
                            <el-input maxlength="12"  v-model="form.customName" disabled placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="出租方:" prop="lessorName">
                            <el-input maxlength="12"  v-model="form.lessorName" disabled placeholder="请输入出租方"></el-input>
                        </el-form-item>
                    </el-col> 
                    <!-- <el-col :span="8">
                        <el-form-item label="催收进度:" prop="collectionProcess">
                            <el-input maxlength="12"  v-model="form.collectionProcess" disabled placeholder="请输入催收进度"></el-input>
                        </el-form-item>
                    </el-col>  -->
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>诉讼信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="诉讼申请原因:" prop="proceedReason">
                            <el-input maxlength="50" type="textarea" :rows="2" v-model="form.proceedReason" placeholder="请输入诉讼申请原因"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="诉讼方案:" prop="proceedPlan">
                            <el-input maxlength="12" type="textarea" :rows="2"  v-model="form.proceedPlan"  placeholder="请输入诉讼方案"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="24">
                        <el-form-item label="附件上传:" prop="proceedFile">
                            <div class="flex">
                                <ImageCommon  info="" :limit="20" v-model="form.proceedFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="租赁合同:" prop="leaseFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="1" v-model="form.leaseFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="买卖合同:" prop="tradeFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="1" v-model="form.tradeFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="担保合同:" prop="assureFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="20" v-model="form.assureFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>交车信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="出库交车单:" prop="outShedDeliveryFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="20" v-model="form.outShedDeliveryFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="还车交车单:" prop="rerurnCarDeliveryFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="20" v-model="form.rerurnCarDeliveryFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>客户回单发票</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="客户银行回单:" prop="bankReceiptFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="1" v-model="form.bankReceiptFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户发票单:" prop="invoiceFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :limit="1" v-model="form.invoiceFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>费用信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="累计未结清费用:" prop="allNoPayoffCost">
                            <el-input maxlength="50" v-thousand  v-model="form.allNoPayoffCost" disabled placeholder="请输入累计未结清费用"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <!-- 未结清 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ form.contractNoPayoffCost|filterNull }}</span> 
                    </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames" @change="handleChange" v-for="(item,index) in form.resultOverDueVoList" :key="index">
                    <el-collapse-item title="一致性 Consistency" name="1">
                        <template slot="title">
                            <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                            <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                        </template>
                        <el-table fit :data="item.costContractList" border >
                            <el-table-column prop="proceedsTypeStr" label="费用类型">
                                <template v-slot="{row}">
                                    <dict-tag :options="dict.type.progress_litigation" :value="row.proceedsTypeStr"/>
                                </template>
                            </el-table-column>
                            <el-table-column prop="receivableAmount" label="费用金额">
                                <template v-slot="{row}">
                                    <el-input v-model="row.receivableAmount" v-thousand></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="periodsNum" label="期数"></el-table-column>
                            <el-table-column prop="overdueDay" label="逾期天数"></el-table-column>
                            <el-table-column prop="repaymentTime" label="应收日期"></el-table-column>
                        </el-table>
                    </el-collapse-item>
                    </el-collapse>
            </div>
            <!-- 已结清 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单已结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="">    
                    <el-descriptions-item label="费用总计">
                       <span >{{ form.contractPayoffCost|filterNull }}</span> 
                    </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames1" @change="handleChange1" v-for="(item,index) in form.resultVoList" :key="index">
                    <el-collapse-item title="一致性 Consistency" name="1">
                        <template slot="title">
                        <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                        <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                        </template>
                        <el-table fit :data="item.costContractList" border v-if="tableCloumns.length > 0">
                            <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                            <el-table-column
                                    label="收款凭证"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <div class="handle">
                                        <el-button
                                            size="mini"
                                            type="text"
                                            @click="previewImage([scope.row.earningProve])"
                                            >预览</el-button
                                        >
                                        <el-button size="mini" type="text"
                                            >下载</el-button
                                        >
                                    </div>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                    label="发票"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <div class="handle">
                                        <el-button
                                            size="mini"
                                            type="text"
                                            @click="previewImage([scope.row.url])"
                                            >预览</el-button
                                        >
                                        <el-button size="mini" type="text"
                                            >下载</el-button
                                        >
                                    </div>
                                    </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                    </el-collapse>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="" style="position: relative;">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ form.contractOverdueCost|filterNull }}</span>
                        <el-button type="primary" class="btn_sty" @click="addFess">添加费用</el-button>
                    </el-descriptions-item>
                </el-descriptions>
                    <el-table fit :data="form.overdueVoList" border style="margin-top:10px">
                        <el-table-column prop="carCode" label="车牌号"  fixed="left" width="100" align="center">
                            <!-- <template v-slot="{row}">
                                <el-input v-model="row.carCode"></el-input>
                            </template> -->
                        </el-table-column>
                        <el-table-column prop="overdueCost" label="超期租金" width="100" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.overdueCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="defaultCost" label="违约金" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.defaultCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="peccanCost" label="违章费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.peccanCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carDamageCost" label="车损费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.carDamageCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="depreciationCost" label="加速折旧费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.depreciationCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="overMileageCost" label="超里程费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.overMileageCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="balanceCost" label="尾款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.balanceCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="customClaimCost" label="客户理赔款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.customClaimCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="otherCost" label="其他扣款费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.otherCost" v-thousand></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center">
                            <template slot="header" slot-scope="scope">
                               <span>{{ item }}</span>
                               <i class="el-icon-delete delet_tit" @click="titDelet(item)" ></i>
                            </template>
                            <template slot-scope="scope">
                                <el-input v-model="scope.row[item]" v-thousand></el-input>
                            </template>
                        </el-table-column>
                    </el-table>

            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ form.otherNoPayoffCost|filterNull }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                    <el-table fit :data="form.otherVoList" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用类型"  align="center" >
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.costType'" :rules="rules.costType">
                                    <el-input v-model="scope.row.costType" maxlength="20"></el-input>
                                </el-form-item>  
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="费用金额(元)" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.cost'" :rules="rules.cost">
                                    <el-input v-model="scope.row.cost" v-thousand></el-input>
                                </el-form-item> 
                                
                            </template>
                        </el-table-column>
                        <el-table-column prop="fileId" label="附件" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.fileId'" :rules="rules.fileId">
                                    <Image-common v-model="scope.row.fileId" />
                                </el-form-item>
                                
                            </template>
                        </el-table-column> 
                        <el-table-column  label="操作" align="center">
                            <template v-slot="{row}">
                                <el-button type="text" size="small" @click="deletCostItem(row)">删除</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                    <el-button icon="el-icon-plus" @click="addCostItem">添加费用项</el-button>
            </div>
        </el-form>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel('ruleForm')">取消</el-button>
            <el-button  type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
        <el-dialog title="添加表格列" :visible.sync="dialogFormVisible"  :close-on-click-modal="false" width="30%">
            <el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="getcol()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="订单" :visible.sync="orderOpen"  :close-on-click-modal="false" width="60%">
            <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
                <el-col :span="12">
                    <el-form-item label="订单编号:" prop="orderCode">
                        <el-input v-model="queryParams.orderCode" clearable placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户名称:" prop="customerName">
                        <el-input v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                </el-col>
            </SearchContent>
            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
               
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="订单编号" align="center" prop="customerCode" 
                        show-overflow-tooltip />
                    <el-table-column label="客户名称" align="center" prop="customerName" 
                        show-overflow-tooltip />
                    <el-table-column label="出租方" align="center" prop="lessorName" 
                        show-overflow-tooltip />
                    <!-- <el-table-column label="催收编号" align="center" prop="collectionProcess" 
                        show-overflow-tooltip />
                    <el-table-column label="催收进度" align="center" prop="collectionProcess" 
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <dict-tag :options="dict.type.progress_litigation" :value="row.type" />
                        </template>
                    </el-table-column> -->
                </template>
                 <!-- 操作插槽 -->
                 <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
                        <template v-slot="{ row }">
                            <e-button size="mini" type="text" @click="handleOperate(row)">选择
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
            </table-page>
        </el-dialog>
    </div>
</template>

<script>


import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import * as apis from "@/api/collectionManagement/litigationApplication";
import SearchContent from "@/components/SearchContent/index.vue";
 
export default {
    components: {TableCloumn,SearchContent},
    dicts: ['progress_litigation'],
    name:'AddLitigation',
    data() {
        return {
            companyList: [],
            belongCompanyList:[],
            first:true,
            tableCloumns: [ ],
            typeList:[],
            definitionList: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
          
            activeNames:1,
            activeNames1:1,
            form:{
                orderCode:"",
                leaseFile:"",
                tradeFile:"",
                assureFile:"",
                outShedDeliveryFile:"",
                rerurnCarDeliveryFile:"",
                bankReceiptFile:"",
                invoiceFile:"",
                resultOverDueVoList:[],
                resultVoList:[],
                overdueVoList:[],
                contractOverdueCost:0,
                contractNoPayoffCost:0,
                contractPayoffCost:0,
                allNoPayoffCost:0,
                otherNoPayoffCost:0,
                otherVoList:[
                {
                    costType:'', cost:null,fileId:null,id:new Date().getTime()
                }
            ],
            },
            rules:{
                orderCode: [
                    { required: true, message: '请选择订单编号', trigger: 'change' },
                ],
                proceedReason: [
                    { required: true, message: '请输入诉讼申请原因', trigger: 'blur' },
                ],
                proceedPlan: [
                    { required: true, message: '请输入诉讼方案', trigger: 'blur' },
                ],
                payeeType:[
                    { required: true, message: '请输入费用类型', trigger: 'blur' },
                ],
                custMoney:[
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                inspectionInvoiceUrl:[
                    { required: true, message: '请上传附件', trigger: 'blur' },
                ],
            },
            
            titleList:[],
            dialogFormVisible:false,
            colName: '',
            orderOpen:false,
             // 查询参数
             queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderCode:null,
                customerName:null,
            },
            total:0,
            loading:false,
            dataList:[
                {
                    orderCode:'1773540462967427073',
                    lessorName:'dwed',
                    customName:'12d3d',
                    collectionProcess:'wanceng'
                }
            ]
        };
    },
    watch:{
        titleList:{
            deep:true,
            handler(val){
                this.titleList = val
            }
        },
        form:{
            deep:true,
            handler(val){
                this.form = val
                // 合同期内或合同期外未还车发生诉讼产生的未结清费用
                let num = 0 
                 val.overdueVoList?.map((res)=>{
                    if(res?.overdueCost){
                        num = Number(res?.overdueCost) + Number(num)
                    } 
                    if(res?.defaultCost){
                        num = Number(res?.defaultCost) + Number(num)
                    }
                    if(res?.peccanCost){
                        num = Number(res?.peccanCost) + Number(num)
                    }
                    if(res?.carDamageCost){
                        num = Number(res?.carDamageCost) + Number(num)
                    }
                    if(res?.depreciationCost){
                        num = Number(res?.depreciationCost) + Number(num)
                    }
                    if(res?.overMileageCost){
                        num = Number(res?.overMileageCost) + Number(num)
                    }
                    if(res?.balanceCost){
                        num = Number(res?.balanceCost) + Number(num)
                    }
                    if(res?.customClaimCost){
                        num = Number(res?.customClaimCost) + Number(num)
                    }
                    if(res?.otherCost){
                        num = Number(res?.otherCost) + Number(num)
                    }
                    
                })
                let otherNum = 0
                if(this.titleList?.length>0){
                    this.titleList.map((item)=>{
                        val.overdueVoList.map((item1)=>{
                            otherNum =  Number(item1[item]) + Number(otherNum)
                        })
                    })
                }
                let allNum = num + otherNum
                this.$set(this.form,'contractOverdueCost',allNum.toFixed(2))
                let AllNum = 0
                AllNum = Number(val.otherNoPayoffCost) + Number(val.contractOverdueCost) + Number(val.contractPayoffCost) + Number(val.contractNoPayoffCost)
                this.$set(this.form,'allNoPayoffCost',AllNum.toFixed(2))
            } 
        },
        'form.resultOverDueVoList':{
            deep:true,
            handler(val){
                 // 合同期内已生成账单未结清费用
                 let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        if(info.costContractList){
                            info.costContractList.map((item)=>{
                                unclearedNum = Number(item.receivableAmount) + Number(unclearedNum)
                            })
                            
                        }   
                    })
                    
                    this.$set(this.form,'contractNoPayoffCost',unclearedNum.toFixed(2))
            }
        },
        'form.resultVoList':{
            deep:true,
            handler(val){
                 // 合同期内已生成账单已结清费用
                 let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        if(info.costContractList){
                            info.costContractList.map((item)=>{
                                unclearedNum = Number(item.receivableAmount) + Number(unclearedNum)
                            })
                            
                        }   
                    })
                    this.$set(this.form,'contractPayoffCost',unclearedNum.toFixed(2))
            }
        },
        'form.otherVoList':{
            deep:true,
            handler(val){
                this.form.otherVoList = val
                let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        unclearedNum = Number(info.cost) + Number(unclearedNum)
                    })
                    
                    this.$set(this.form,'otherNoPayoffCost',unclearedNum.toFixed(2))
            }
        },
    },
    async created(){
        this.typeList = await this._getDicts("progress_litigation");
        this.tableCloumns = [
        {
                    label: "费用类型",
                    prop: "proceedsTypeStr",

                },
                {
                    label: "费用金额",
                    prop: "receivableAmount",
                },
                {
                    label: "期数",
                    prop: "periodsNum",
                },
               
                {
                    label: "应收日期",
                    prop: "repaymentTime",
                },
                {
                    label: "实收日期",
                    prop: "paymentTime",
                },
                
        ]
    },
    mounted() {
    },
    methods: {
        handleQuery(){
            this.queryParams.pageNum = 1;
            this.getList();
        },
         /** 重置按钮操作 */
         resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                orderCode: null,
                customerName: null,
            },
            this.getList();
        },
        moneyFormat(money){           
        //没有小数补齐这个0
            if(money){
                if(money?.indexOf(".")=="-1"){
                    money=money+".00";
                }else{
                //有小数截取前二位小数
                    money=money.substring(0,money?.indexOf(".")+3);
                }
                return money
            }   
        },
        // 选择订单
        handleOperate(info){
            this.$set(this.form,'orderCode',info.orderCode)   
            this.$set(this.form,'lessorId',info.lessorId)   
            this.$set(this.form,'lessorName',info.lessorName)   
            this.$set(this.form,'customName',info.customerName)   
            this.$set(this.form,'collectionProcess',info.collectionProcess)
           
            this.getOtherInfo(info.orderId,info)
            this.loading = true
        },
        // 获取其他信息接口
        getOtherInfo(id,info){
            apis.selectOrderInfo({orderId:id}).then((res)=>{
                if(res.code==200){
                    // this.form= {...this.form,...res?.data}
                    this.$set(this.form,'resultOverDueVoList',res.data?.resultOverDueVoList)
                    this.$set(this.form,'resultVoList',res.data?.resultVoList)
                    this.$set(this.form,'overdueVoList',res.data?.overdueVoList)
                    this.$set(this.form,'leaseFile',res.data?.leaseFile)
                    this.$set(this.form,'tradeFile',res.data?.tradeFile)
                    this.$set(this.form,'assureFile',res.data?.assureFile)  
                    this.$set(this.form,'outShedDeliveryFile',res.data?.outShedDeliveryFile)
                    this.$set(this.form,'rerurnCarDeliveryFile',res.data?.rerurnCarDeliveryFile)  
                    this.$set(this.form,'bankReceiptFile',res.data?.bankReceiptFile)
                    this.$set(this.form,'invoiceFile',res.data?.invoiceFile)   
                    // this.$set(this.form,'lessorName',res.data?.lessorName?res.data?.lessorName:info.lessorName)  
                    // this.$set(this.form,'customName',res.data?.customName?res.data?.customName:info.customName)  
                    // this.$set(this.form,'collectionProcess',res.data?.collectionProcess?res.data?.collectionProcess:info.collectionProcess)  
                    this.orderOpen =false
                    this.loading = false
                    console.log(this.form,'this.formthis.form')
                }
                
            })
        },
        // 点击订单编号弹框
        selectOrder(){
            this.orderOpen = true
            this.loading = true
            this.getList()
        },
        // 获取催收列表
        getList(){
            apis.getCollectionList(this.queryParams).then((res)=>{
                if(res.code==200){
                    this.loading = false
                    this.dataList = res.rows
                    this.total = res.total
                }
            })
            
        },
        handleChange(){},
        handleChange1(){},
        cancel(formName){
            this.$refs[formName].resetFields();
            this.$router.push({name:"LitigationApplication"})
        },
        submitForm(formName){ 
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let param = {...this.form,flag:true}
                console.log(this.form,'this.form')
                param.overdueVoList.map((res)=>{
                    res.costJson = JSON.stringify(this.titleList)
                })
                param.overdueJson  = JSON.stringify(param.overdueVoList)
                console.log(param,'paramparam')
                console.log(this.titleList,'titleList')
                apis.litigationAdd(param).then((res)=>{
                    if(res.code==200){
                        this.$message.success('保存成功')
                        this.$router.push({name:"LitigationApplication"})
                    }
                })
                console.log(this.definitionList,'definitionList')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
           
        },
        // 添加费用项类型
        addFess(){
            this.dialogFormVisible = true
        },
        getcol(){
            this.addCol()
            this.dialogFormVisible = false
            this.colName = ''
        },
        //新增列
        addCol(){
            this.dialogFormVisible = true
            if(this.colName !==''){
                this.titleList.push(this.colName)
                this.form.overdueVoList?.map((res)=>{
                    // res.costJson.push(this.colName)
                    // res[this.colName] = null
                    this.$set(res,this.colName,'')
                })
            }
        },
        // 删除列
        titDelet(value){
            // this.form.overdueVoList?.map((res)=>{
            //     res.costJson.map((item,index)=>{
            //         if(item==value){
            //             res.costJson.splice(index,1)
            //             this.form.overdueVoList = this.form.overdueVoList?.filter(item => item.key!== value);
            //         }
            //     })
            //     })
            this.titleList.map((res,index)=>{
                if(res==value){
                    this.titleList.splice(index,1)
                    this.form.overdueVoList = this.form.overdueVoList?.filter(item => item.key!== value);
                    return
                }
            })    
        },
        // 添加费用列表
        addCostItem(){
            let obj ={
                costType:null, 
                cost:0,
                fileId:null,
                id:new Date().getTime()
            }
            this.form.otherVoList.push(obj)
            console.log(this.otherVoList)
        },
        // 删除费用列表
        deletCostItem(info){
            this.form.otherVoList.map((res,index)=>{
                if(res.id==info.id){
                    this.form.otherVoList.splice(index,1)
                }
            })
        }

    }
};
</script>


<style lang="scss" scoped>

.el-descriptions{
    margin: 0 -15px;
}
.btn_sty{
    position: absolute;
    right: 10px;
    top:0px
}
.delet_tit{
    float: right;
    cursor: pointer;
}
.el-descriptions {
    margin: 0 -15px;
}
.el-col{
    min-height: 80px;
}

</style>
